<template>
  <div class="w-100 h-100">
    <el-form
      ref="newPolymerizationFormRef"
      :rules="newPolymerizationModelRules"
      :model="newPolymerizationModel"
      label-width="80px"
      :inline="true"
    >
      <el-form-item label="数据类型" prop="dataType">
        <el-select v-model="newPolymerizationModel.dataType">
          <el-option
            v-for="item in dataTypeOption"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="区域标签" prop="tagCode">
        <el-cascader
          v-model="newPolymerizationModel.tagCode"
          style="width: 100%;"
          ref="cascaderHandleRef"
          @change="handleSelectChange"
          :options="tagOption"
          :props="tagProps"
          clearable></el-cascader>
      </el-form-item>
      <el-form-item label="设备标签" prop="deviceCode">
        <el-select v-model="newPolymerizationModel.deviceCode" filterable>
          <el-option
            v-for="item in deviceOption"
            :key="item.deviceCode"
            :label="item.deviceName"
            :value="item.deviceCode"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="设备类型" prop="deviceTypeCode">
        <el-select v-model="newPolymerizationModel.deviceTypeCode">
          <el-option
            v-for="item in deviceTypeOption"
            :key="item.dicCode"
            :label="item.dicName"
            :value="item.dicCode"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="参数代码" prop="parameterCode">
        <el-input v-model="newPolymerizationModel.parameterCode"/>
      </el-form-item>
      <el-form-item>
        <div class="pl-3">
          <el-button class="mr-2" type="primary" @click="searchClick" size="medium">搜索</el-button>
          <el-button type="warning" @click="resetClick" size="medium">重置</el-button>
        </div>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="loading"
      :data="tableData"
      row-key="messages"
      @row-click="rowClick"
      @selection-change="handleSelectionChange"
      border
      ref="instantiationTable"
      style="width: 100%;"
    >
      <el-table-column type="index" label="序号" width="50" align="center"/>
      <el-table-column label="数据类型" align="center">
        <template slot-scope="{row}">
          {{row.dataType=="0"?"设备数据":row.dataType=="1"?"聚合数据":"自定义运行数据"}}
        </template>
      </el-table-column>
      <el-table-column prop="tagName" label="区域标签" align="center"/>
      <el-table-column prop="deviceName" label="设备名称" align="center"/>
      <el-table-column prop="deviceTypeName" label="设备类型标签" align="center"/>
      <el-table-column prop="parameterCode" label="参数代码" align="center"/>
      <el-table-column prop="parameterName" label="参数名称" align="center"/>
      <el-table-column prop="dataValue" label="数据值" width="100" align="center"/>
      <el-table-column prop="dataValueName" label="数据值名称" align="center"/>
      <el-table-column v-if="selectionOrRadio=='1'" type="selection" reserve-selection width="55"
                       align="center"></el-table-column>
      <el-table-column v-else type="radio" width="55" label="选择" align="center">
        <template slot-scope="scope">
          <el-radio v-model="selectedRowId" :label="scope.row.messages" @change="handleRadioChange(scope.row)">
            {{" "}}
          </el-radio>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      class="pagination"
      :total="count"
      :page.sync="pageIndex"
      :limit.sync="pageSize"
      @pagination="getAccountData"
    />
  </div>
</template>

<script>
  import {
    queryRedisConfigData
  } from "@/api/dataManage/IOTData"

  import {
    queryDeviceTagList,
    queryListByDevice
  } from "@/api/dataInsertConfig/internetOfThingsDevice"

  export default {
    name: "instantiateTable",
    props: {
      selectionOrRadio: {
        default: ""
      }
    },
    data() {
      return {
        tableData: [],
        count: 0,
        pageIndex: 1,
        pageSize: 5,
        loading: false,

        newPolymerizationModel: {
          dataType: "",
          tagCode: "",
          deviceCode: "",
          deviceTypeCode: "",
          parameterCode: ""
        },
        newPolymerizationModelRules: {},

        dataTypeOption: [
          { name: "设备数据", value: "0" },
          { name: "聚合数据", value: "1" },
          { name: "自定义运行数据", value: "2" }
        ],
        tagOption: [],
        tagProps: {
          label: "tagName",
          value: "tagCode",
          children: "childList",
          checkStrictly: true
        },
        deviceOption: [],
        deviceTypeOption: [],

        selectedRowId: "",
        selectedRow: null, // 用于存储单选选中的行
        selectedRows: [] // // 用于存储复选选中的行
      }
    },
    created() {
      this.getAccountData()
      this.queryDeviceTagList()
      this.queryListByDevice()
    },
    methods: {
      // 区域标签
      queryDeviceTagList() {
        queryDeviceTagList({
          deviceCom: "0"
        }).then(res => {
          const tempArr = res.object

          this.deviceTypeOption = tempArr.deviceTypeList
          this.tagOption = tempArr.ownerList
        })
      },
      // 设备类型
      queryListByDevice() {
        queryListByDevice({ deviceCom: "0" }).then(res => {
          this.deviceOption = res.object
        })
      },

      handleSelectChange(node) {
        // if (!this.$refs.cascaderHandleRef.getCheckedNodes()[0]?.hasChildren) {
        this.$refs.cascaderHandleRef.dropDownVisible = false
        // }
      },
      /**
       * 获取表格方法
       */
      async getAccountData(tableInfo) {
        this.loading = true
        if (tableInfo) {
          const { dataType, tagCode, deviceCode, deviceTypeCode, parameterCode } = this.newPolymerizationModel
          const { object } = await queryRedisConfigData({
            pageIndex: this.pageIndex,
            pageSize: this.pageSize,
            dataType,
            tagCode: tagCode[tagCode.length - 1],
            deviceCode, deviceTypeCode, parameterCode
          })
          this.tableData = object.data
          this.count = object.count
          this.loading = false
        } else {
          const { dataType, tagCode, deviceCode, deviceTypeCode, parameterCode } = this.newPolymerizationModel
          const { object } = await queryRedisConfigData({
            pageIndex: this.pageIndex,
            pageSize: this.pageSize,
            dataType,
            tagCode: tagCode[tagCode.length - 1],
            deviceCode, deviceTypeCode, parameterCode
          })
          this.tableData = object.data
          this.count = object.count
          this.loading = false
        }
      },
      searchClick() {
        this.getAccountData()
        this.loading = false
      },
      // 重置
      resetClick() {
        Object.keys(this.newPolymerizationModel).forEach((item) => {
          this.newPolymerizationModel[item] = ""
        })

        this.getAccountData()
        this.loading = false
      },


      rowClick(row, column, event) {
        if (this.selectionOrRadio == "1") {
          // 检查当前行是否已选中
          const index = this.selectedRows.findIndex(item => item.messages === row.messages)

          if (index > -1) {
            // 如果已选中，则取消选中
            this.selectedRows.splice(index, 1)
          } else {
            // 如果未选中，则添加到选中列表
            this.selectedRows.push(row)
          }

          // 更新表格的选择状态
          this.$refs.instantiationTable.toggleRowSelection(row)
        } else {
          this.selectedRowId = row.messages
          this.selectedRow = row
        }
      },
      handleSelectionChange(val) {
        this.selectedRows = val
      },

      handleRadioChange(row) {
        this.selectedRow = row
      }
    }
  }
</script>

<style scoped>
  .pagination {
    display: flex;
    justify-content: flex-end;
  }
</style>
